<%--
  Created by IntelliJ IDEA.
  User: 夏子怡
  Date: 2024/12/20
  Time: 10:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>订单页面</title>
</head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<style>
    .center {

        width: 700px;
        height: 1000px;
        margin: 0 auto;
        font-weight: bold;
    }

    .ding {
        color: green;
    }

    .ckgd {
        color: black;
    }

    .popup {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .popup-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    #openPopup {
        text-decoration: none;
        color: black;
        float: right;
    }

    #roomNumber {
        width: 308px;
        height: 40px;
        font-size: 20px;
        margin-left: 38px;
    }

    .for {
        font-size: 20px;
    }

    #occupantFields p {
        font-size: 20px;
    }

    #occupantFields input {
        margin-left: 30px;
        width: 300px;
        height: 30px;
        font-size: 20px;
    }

    #contactPhone {
        margin-left: 18px;
        width: 300px;
        height: 30px;
        font-size: 20px;
        margin-top: 18px;
    }
    #sfztel{
     margin-left: 18px;
        width: 300px;
        height: 30px;
        font-size: 20px;
        margin-top: 18px;
    }
    #xmname{
        margin-left: 58px;
        width: 300px;
        height: 30px;
        font-size: 20px;
    }
    .left {
        float: left;
    }

    .right {
        float: right;
    }
    .djzf {
        width: 280px;
        height: 95px;
        background-color: green;
        border-radius: 20px;
        margin-top: 20px;
    }

    .zf {
        width: 280px;
        height: 95px;
        background-color: green;
        border-radius: 20px;
        margin-top: 20px;
      font-size: 50px;
        background-color: green;
        color: white;
    }

    .jiesuan {
        width: 280px;
        height: 300px;
        border: solid 1px
    }
    .zt{
        font-size: 20px;
        line-height: 35px;
    }


    ul li {
        list-style: none;
        display: inline;
    }

    img {
        vertical-align: middle;
    }

    #navbar-left {
        width: 100%;
        height: 30px;
        background-color: lightgrey;
        line-height: 30px;

    }

    #navbar-left ul li span {
        font-size: 12px;
        color: #999;
        margin-left: 30px;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    nav {
        position: absolute;
        left: 900px;
        top: -10px;
        padding: 0 16px;
    }

    .nav-list {
        display: flex;
        list-style: none;
        height: 48px;
        align-items: center;
    }

    .nav-item {
        position: relative;
    }

    .nav-link {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        text-decoration: none;
        font-size: 12px;
        color: #999;
        cursor: pointer;
    }


    .dropdown-icon {
        width: 12px;
        height: 12px;
        margin-left: 4px;
        transform: rotate(0deg);
        transition: transform 0.2s;
    }

    .dropdown-icon.active {
        transform: rotate(180deg);
    }

    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: whitesmoke;
        width: 100px;
        display: none;
        opacity: 0;
        transition: opacity 0.2s;
        margin-left: 15px;
    }

    .dropdown-menu.show {
        display: block;
        opacity: 1;
    }

    .dropdown-item {
        display: block;
        text-decoration: none;
        color: #666;
        font-size: 12px;
        margin-top: 10px;
        text-indent: 30px;

    }

    .dropdown-item:hover {
        color: red;
    }

    #bog-box-top {
        align-items: center;
    }


    <%--loger地名部分--%>
    .city-selector {
        position: relative;
        display: inline-block;
    }

    .selected-city {
        margin-left: 20px;
        line-height: 40px;
        height: 40px;
        font-size: 16px;
        color: #666666;
    }

    .city-trigger {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 8px 12px;
        font-size: 14px;
        cursor: pointer;
        border: none;
        background: none;
    }

    .city-trigger:hover {
        color: #00b96b;
    }

    .arrow {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid currentColor;
        transition: transform 0.2s;
    }

    .arrow.down {
        transform: rotate(180deg);
    }

    .dropdown {
        display: none;
        position: absolute;
        top: 50px;
        left: 22px;
        width: 600px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        padding: 16px;
        z-index: 1000;

    }

    .tabs {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
    }

    .tab {
        padding: 4px 8px;
        font-size: 14px;
        cursor: pointer;
        border: none;
        background: none;
        color: #666;
    }

    .tab.active {
        color: #00b96b;
        border-bottom: 2px solid #00b96b;
    }

    .cities-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
    }

    .city-button {
        padding: 8px;
        font-size: 14px;
        border: none;
        background: none;
        cursor: pointer;
        border-radius: 4px;
    }

    .city-button:hover {
        color: red;
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    .contact-wrapper {
        position: absolute;
        left: 1300px;
        top: 65px;
        z-index: 1000;
    }


    .contact-icon i {
        color: white;
        font-size: 24px;
    }

    .contact-info {
        position: absolute;
        left: 0;
        top: 60px;
        width: 200px;
        background: white;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        display: none;
    }

    .contact-info h3 {
        margin: 0 0 10px 0;
        font-size: 16px;
        color: #333;
    }

    .qr-code {
        width: 150px;
        height: 150px;
        margin: 10px auto;
        display: block;
    }

    .phone-numbers {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #eee;
    }

    .phone-number {
        margin: 5px 0;
        color: #666;
        font-size: 14px;
    }


    #span-kefu {
        font-size: 12px;
        display: inline-block;
        margin-left: 10px;
        color: #666666;
    }

    #span-ipone {
        color: #666666;
    }

    /*头部导航栏*/
    #GYH-nav {
        background-color: #00c250;
        width: 100%;
        padding: 0;
        margin: 0;
        margin-top: 20px;
    }

    .GYH-nav-container {


        display: flex;
        align-items: center;

    }

    .GYH-nav-list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .GYH-nav-item {
        position: relative;
        margin-left: 6px;
    }

    .GYH-nav-link {
        color: white;
        text-decoration: none;
        padding: 15px 20px;
        display: block;
        font-size: 14px;
        position: relative;

    }

    .GYH-nav-link:after {
        content: "▾";
        margin-left: 5px;
        font-size: 12px;
        opacity: 0.8;
    }

    .GYH-nav-item:hover .GYH-nav-link {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .GYH-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: white;
        min-width: 150px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        display: none;
        z-index: 1000;
    }

    .GYH-dropdown-item {
        padding: 10px 15px;
        color: #333;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid #eee;
    }

    .GYH-dropdown-item:hover {
        background-color: #f5f5f5;
    }

    /*底部*/
    .service-highlights {
        display: flex;
        justify-content: space-around;
        padding: 20px 0;
        background: #fff;
        border-bottom: 1px solid #eee;
    }

    .highlight-item {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #666;
    }

    .site-footer {
        background: #333;
        color: #fff;
        padding: 40px 0;
    }

    .footer-content {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        padding: 0 20px;
    }

    .footer-section h3 {
        font-size: 16px;
        margin-bottom: 20px;
        color: #fff;
    }

    .footer-section ul {
        list-style: none;
        padding: 0;
    }

    .footer-section{
        margin-left: -50px;
    }

    .footer-section ul li {
        margin-bottom: 10px;
        display: block;
    }

    .footer-link {
        color: #999;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .footer-link:hover {
        color: #fff;
    }

    .qr-code {
        text-align: center;
    }

    .qr-code img {
        width: 120px;
        height: 120px;
        margin-bottom: 10px;
    }

    .popular-links {
        max-width: 1200px;
        margin: 20px auto 0;
        padding: 20px;
        border-top: 1px solid #444;
    }

    .links-section {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        color: #999;
    }

    .links-section a {
        color: #999;
        text-decoration: none;
    }

    .links-section a:hover {
        color: #fff;
    }



    #footer-section{
        position: absolute;
        left: 1400px;

    }

    #footer-section h3{
        margin-left: 12px;
    }


    #foot-bottom a{
        text-decoration: none;
        color: grey;
    }

    #foot-bottom p{
        color: grey;
    }

    #login-text-index{
        text-decoration: none;
        color: #999999;
    }

    #zhuce a{
        text-decoration: none;
        color: #999999;
    }
</style>

<body>
<div id="bog-box-top">
    <div id="navbar-left">
        <ul>
            <li><span><a id="login-text-index" href="/login.jsp">您好，请登录</a><span id="tuichu">退出</span></span></li>
            <li><span id="zhuce"><a href="/register.jsp">注册</a></span></li>
            <li><img src="img/pc_index_gister.gif"></li>
        </ul>


    </div>


    <nav>
        <ul class="nav-list">
            <li class="nav-item">
                <a class="nav-link">
                    Language
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item"><img
                            src="img/rBLkCVvWbqmAJWxmAAABQaM8azg489.png">English</a>
                    <a href="#" class="dropdown-item"><img src="img/rBLkCVvS7pSAa_ssAAAA82XoyWY361.png">中文</a>
                </div>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">我的订单</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">
                    我的同程
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">我的订单</a>
                    <a href="#" class="dropdown-item">我的信息</a>
                    <a href="#" class="dropdown-item">我的收藏</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link">
                    客服服务
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">帮助中心</a>
                    <a href="#" class="dropdown-item">在线客服</a>
                    <a href="#" class="dropdown-item">人工申诉</a>
                    <a href="#" class="dropdown-item">抱团定制</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link">
                    合作中心
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">网站加盟</a>
                    <a href="#" class="dropdown-item">合作加盟</a>
                    <a href="#" class="dropdown-item">门票合作</a>
                    <a href="#" class="dropdown-item">商旅合作</a>
                </div>
            </li>

            <li class="nav-item">
                <a id="my-admin" href="backStageManagement%20.jsp" class="nav-link">我的后台</a>
            </li>
        </ul>
    </nav>

</div>

<div >
    <img  src="img/PS2lfS0492.jpg">
</div>


<%--首页导航栏--%>
<div id="GYH-nav">

    <div class="GYH-nav-container">
        <ul class="GYH-nav-list">
            <li class="GYH-nav-item">
                <a href="/" class="GYH-nav-link">首页</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/hotel" class="GYH-nav-link">酒店</a>
                <div class="GYH-dropdown">
                    <a href="/hotel/domestic" class="GYH-dropdown-item">国内酒店</a>
                    <a href="/hotel/international" class="GYH-dropdown-item">国际酒店</a>
                </div>
            </li>
            <li class="GYH-nav-item">
                <a href="/flight" class="GYH-nav-link">机票</a>
                <div class="GYH-dropdown">
                    <a href="/flight/domestic" class="GYH-dropdown-item">国内机票</a>
                    <a href="/flight/international" class="GYH-dropdown-item">国际机票</a>
                </div>
            </li>
            <li class="GYH-nav-item">
                <a href="/train" class="GYH-nav-link">火车票</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/car" class="GYH-nav-link">汽车船票</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/vacation" class="GYH-nav-link">景点</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/local" class="GYH-nav-link">周边团购</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/domestic" class="GYH-nav-link">境内游</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/international" class="GYH-nav-link">出境游</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/post" class="GYH-nav-link">邮轮</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/visa" class="GYH-nav-link">签证</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/register.jsp" class="GYH-nav-link">攻略</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/corporate" class="GYH-nav-link">企业商旅</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/corporate" class="GYH-nav-link">亮丽内蒙古</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/corporate" class="GYH-nav-link">更多</a>
            </li>
        </ul>
    </div>
</div>

<div class="center">
    <h1>预订信息</h1>
    <p class="ding">订房必读: <span style="color: black;">入住时间：14:00后 退房时间：
					14:00前</span> <a href="javascript:void(0)" id="openPopup">点击查看</a></p>
    <div id="popup" class="popup">
        <div class="popup-content">
            <span class="close">&times;</span>
            <h1>订房必读</h1>
            <hr/>
            <span>入离时间</span><br/>
            <span>入住时间：14:00后 退房时间：14:00前</span>
            <br/><br/>
            <span>城市通知</span><br/>
            <span>为贯彻落实《上海市生活垃圾管理条例》相关规定，推进生活垃圾源头减量，上</span>
            <br/><span>海市文化和旅游局特制定《关于本市旅游住宿业不主动提供客房一次性日用品的</span><br/>
            <span>实施意见》，2019年7月1日起，上海市旅游住宿业将不再主动提供牙刷、梳</span><br/>
            <span>子、浴擦、剃须刀、指甲锉、鞋擦这些一次性日用品。若需要可咨询酒店。</span><br/><br/>
            <span>年龄限制</span><br/>
            <span>入住办理人需年满18岁</span>
            <br/><br/><span>宠物</span><br/><span>不可携带宠物</span><br/><br/>
            <span>证件提示</span><br/>
            <span>需携带所有入住人的有效身份证件（例如身份证、护照），一人一证办理入住。</span>
            <hr/>

        </div>
    </div>
    <hr/>
    <div class="left">
        <h2>入住信息</h2>
        <form action="#" method="post">
        <label for="roomNumber" class="for">房间数</label>
        <select id="roomNumber" onchange="showFields()">
            <option value="1">1间</option>
            <option value="2">2间</option>
            <option value="3">3间</option>
            <option value="4">4间</option>
            <option value="5">5间</option>
            <option value="6">6间</option>
            <option value="7">7间</option>
            <option value="8">8间</option>
            <option value="9">9间</option>
            <option value="10">10间</option>
        </select>

        <div id="occupantFields"></div>

        <label for="contactPhone" class="for">联系电话</label>
        <input type="text" id="contactPhone" placeholder="电话号码">
        <br/><br/>
        <label for="xmname" class="for">姓名</label>
        <input type="text" id="xmname" placeholder="请输入姓名">
        <br>
        <label for="sfztel" class="for">身份证号</label>
        <input type="text" id="sfztel" placeholder="请输入身份证号">
        </form>
        <h2>本单优惠<span style="color: red;" class="money">${Math.floor((Integer.parseInt(param.time) * Integer.parseInt(param.price)) / 100 * 5)}</span></h2>
        <p>特惠红包：<span>立减<span class="money"></span></span></p>
        <h2>离店可享</h2>
        <p>5元无门槛券</p>
        <h2>取消政策</h2>
        <table border="1px" style="border-collapse: collapse;">
            <tr>
                <th>北京时间</th>
                <th>取消&修改费用</th>
            </tr>
            <tr>
                <td>12-20 18:00 前</td>
                <td style="color: green;">免费取消</td>
            </tr>
            <tr>
                <td>12-20 18:00～21:00</td>
                <td>仅扣￥54</td>
            </tr>
            <tr>
                <td>12-20 21:00 后</td>
                <td>不可取消</td>
            </tr>
        </table>
        <h2>发票</h2>
        <p>如需发票，请从酒店前台索取</p>
    </div>
    <div class="right">
        <p><img width="280px" src="img/nw_000dibhj.jpg" alt=""></p>
        <div class="jiesuan">
            <p class="zt" style="text-align: center">品牌：<span class="pp">${param.brand}</span></p>
            <p class="zt">酒店名称：<span class="jdname">${param.name}</span></p>
            <p class="zt">晚数:${param.time}</p>
            <p class="zt">单价：${param.price}</p>
            <p class="zt">总价：<span style="color: red" class="prices"></span></p>
            <p class="zt">总优惠：<span style="color: red" ></span></p>
        </div>
       <p> <button type="submit" class="zf">点击下单</button></p>

    </div>
</div>
<div class="service-highlights">
    <div class="highlight-item">
        <i class="icon-price"></i>
        <span>价格公正，安心购买</span>
    </div>
    <div class="highlight-item">
        <i class="icon-quality"></i>
        <span>品质保证，放心出行</span>
    </div>
    <div class="highlight-item">
        <i class="icon-service"></i>
        <span>产品丰富，一站式服务</span>
    </div>
    <div class="highlight-item">
        <i class="icon-support"></i>
        <span>专业顾问，24小时客服</span>
    </div>
</div>
<!-- Footer Navigation -->
<footer class="site-footer">
    <div class="footer-content">
        <!-- Customer Service Section -->
        <div class="footer-section">
            <h3>消费者服务</h3>
            <p>同程投诉受理电话：95711</p>
            <p>同程投诉受理邮箱：tcfwfxbz@ly.com</p>
        </div>

        <!-- About Section -->
        <div class="footer-section">
            <h3>关于同程</h3>
            <ul>
                <li><a href="/about" class="footer-link">同程简介</a></li>
                <li><a href="/sites" class="footer-link">可信网站</a></li>
                <li><a href="/sitemap" class="footer-link">网站地图</a></li>
                <li><a href="/terms" class="footer-link">用户协议与隐私条款</a></li>
            </ul>
        </div>

        <!-- Partnership Section -->
        <div class="footer-section">
            <h3>加盟合作</h3>
            <ul>
                <li><a href="/join" class="footer-link">合作加盟</a></li>
                <li><a href="/business" class="footer-link">商旅合作</a></li>
                <li><a href="/insurance" class="footer-link">旅游保险</a></li>
                <li><a href="/store" class="footer-link">门店合作</a></li>
            </ul>
        </div>


        <div class="footer-section">
            <h3>联系我们</h3>
            <ul>
                <li><a href="/join" class="footer-link">联系我们</a></li>
                <li><a href="/business" class="footer-link">投诉建议</a></li>
                <li><a href="/insurance" class="footer-link">诚聘英才</a></li>
                <li><a href="/store" class="footer-link">廉洁举报平台</a></li>
            </ul>
        </div>

        <!-- Mobile App Section -->
        <div class="footer-section" id="footer-section">
            <h3>同程旅行app</h3>
            <div class="qr-code">
                <img src="img/img.png" alt="扫描下载APP">
                <p>手机预订更优惠</p>
            </div>
        </div>
    </div>

    <!-- Popular Links -->
    <div class="popular-links">
        <div class="links-section">
            <span>热点推荐：</span>
            <a href="/disneyland" class="footer-link">迪斯尼旅游</a>
            <a href="/thailand" class="footer-link">泰国旅游</a>
            <a href="/japan" class="footer-link">日本旅游</a>
            <!-- Add more links as needed -->
        </div>
    </div>

    <div id="foot-bottom">
        <p>Copyright © 2002-2024  版权所有  <a href="#">同程网络科技股份有限公司</a></p>
        <p><a href="#">经营许可证编号：合字B2-20180016 </a>    <a href="#">备案序号：苏ICP备09033604号</a>  <a href="#"><img src="img/微信图片编辑_20241216151627.jpg"></img>苏公网安备32059002001003号 </a>   <a href="#">旅行社业务许可证：L-JS-CJ00070</a>  </p>
        <p><a href="#">旅游网站诚信建设承诺书 </a>    <a href="#">旅游网站守法诚信责任状 </a>   <span>违规失信举报热线：4007-777-777转9</span></p>
        <p>国家文旅部全国旅游投诉热线：拨打12345，或登录全国旅游网络投诉举报平台</p>
        <p>网站网违法和不良信息举报 邮箱：jcj@ly.com</p>
        <p><img src="img/img_1.png"></p>

    </div>
</footer>
</body>
<script type="text/javascript">
    let time = parseInt('${param.time}');
    let price = parseFloat('${param.price}');
    let totalPrice = time * price;
    let discount = Math.floor(totalPrice / 100) * 5;
    let finalPrice = totalPrice - discount;

    // 保留两位小数
    totalPrice = totalPrice.toFixed(2);
    discount = discount.toFixed(2);
    finalPrice = finalPrice.toFixed(2);

    // 将结果填充到HTML中（这里假设你有相应的元素来显示结果）
    document.querySelector('.prices').innerHTML = totalPrice;
    document.querySelector('.zt:last-child span').innerHTML = discount;
    document.querySelector('.zt:nth-last-child(2) span').innerHTML = finalPrice;
    $(".money").text(discount)

    $(".zf").click(function (e){
        e.preventDefault()
       let roomnumbre=$("#roomNumber").val()
        let  contactPhone=$("#contactPhone").val()
        let xmname =$("#xmname").val()
        let sfztel=$("#sfztel").val()
        let prices =$(".prices").text()
        let brand = $(".pp").html();
        console.log(brand)
        let flag=true;
        if (roomnumbre==""){
            alert("房间数不能为空")
            flag=false
        }
        if (contactPhone==""){
            alert("手机号不能为空")
            flag=false;
        }else if(!/^\d{11}$/.test(contactPhone)){
            alert("手机号格式不正确")
            flag=false;
        }
        if (xmname==""){
            alert("姓名不能为空");
        }
        if (sfztel==""){
            alert("身份证号码不能为空")
        }else if(!/^\d{15}$|^\d{18}$|^\d{17}(\d|X|x)$/.test(sfztel)){
            alert("身份证输入错误")
        }
        if (flag){
            $(".zf").submit();
            window.location.href="addorde?roomnumbre="+roomnumbre+"&contactPhone="+contactPhone+"&xmname="+xmname+"&sfztel="+sfztel+"&prices="+prices+"&brand="+brand;
        }


    })
    function showFields() {
        var roomNumber = document.getElementById("roomNumber").value;
        var fieldsDiv = document.getElementById("occupantFields");
        fieldsDiv.innerHTML = "";

        for (var i = 1; i <= roomNumber; i++) {
            var p = document.createElement("p");
            var label = document.createElement("label");
            label.textContent = "入住人" + i;
            var input = document.createElement("input");
            input.placeholder = "每间只需填一人";
            p.appendChild(label);
            p.appendChild(input);
            fieldsDiv.appendChild(p);
        }
    }
    document.getElementById("openPopup").addEventListener("click", function () {
        document.getElementById("popup").style.display = "block";
    });

    var span = document.getElementsByClassName("close")[0];
    span.onclick = function () {
        document.getElementById("popup").style.display = "none";
    }

    window.onclick = function (event) {
        if (event.target == document.getElementById("popup")) {
            document.getElementById("popup").style.display = "none";
        }
    }
</script>
<script>
    $(document).ready(function() {
        // Add smooth page transition on link clicks
        $('.footer-link').click(function(e) {
            e.preventDefault();
            var href = $(this).attr('href');

            // Store the clicked link URL in session storage
            sessionStorage.setItem('lastClickedLink', href);

            // Fade out the page
            $('body').fadeOut(300, function() {
                // Navigate to the new page
                window.location.href = href;
            });
        });

        // Check if we're coming from a footer link click
        if (sessionStorage.getItem('lastClickedLink')) {
            // Fade in the page
            $('body').hide().fadeIn(300);
            // Clear the stored link
            sessionStorage.removeItem('lastClickedLink');
        }

        // Add hover animation for service highlights
        $('.highlight-item').hover(
            function() {
                $(this).stop().animate({ transform: 'translateY(-5px)' }, 200);
            },
            function() {
                $(this).stop().animate({ transform: 'translateY(0)' }, 200);
            }
        );
    });
</script>
<%--登录文字替换--%>
<script>
    if ("${user}"===""){
        document.getElementById("login-text-index").innerText = "您好，请登录"
        //将退出按钮隐藏
        document.getElementById("tuichu").style.display = "none"
        //将我的后台隐藏
        document.getElementById("my-admin").style.display = "none"

    }else{
        document.getElementById("login-text-index").innerText = "Hi,同程会员${user.username}"
        //将退出按钮显示
        document.getElementById("tuichu").style.display = "inline-block"
        //让登录按钮失去效果,页面不在跳转
        document.getElementById("login-text-index").href = "#"
        //隐藏注册按钮
        document.getElementById("zhuce").style.display = "none"
        //将我的后台展现出来
        //如果用户是管理员，则将我的后台展现出来
        if ("${user.status}"=="管理员"){
            document.getElementById("my-admin").style.display = "inline-block"
        }else {
            document.getElementById("my-admin").style.display = "none"
        }
    }
    //点击退出按钮
    $("#tuichu").click(function () {
        //将session域中的值清空
        $.ajax({
            url:"/logout",
            type:"post",
            dataType:"text",
            async:false,
            success:function (data) {
                if (data==200){
                    //将session域中的值清空
                    window.location.href="/index.jsp"
                }else{
                    alert("退出失败")
                }
            }
        })
    })
</script>
</html>
